import { nextTick } from 'vue';
import '/@/theme/loading.scss';

/**
 * 页面全局 Loading
 * @method start 创建 loading
 * @method done 移除 loading
 */
export const NextLoading = {
	// 创建 loading
	start: () => {
		const bodys: Element = document.body;
		const div = <HTMLElement>document.createElement('div');
		div.setAttribute('class', 'loading-next');
		const htmls = `
			<div class="loading-next-box">
			<svg xmlns="http://www.w3.org/2000/svg" width="74.886" height="72" viewBox="0 0 37.443 36">
			<defs><style>.als{fill:#ffffff;stroke:#00a2e5;stroke-miterlimit:10;stroke-width:0.45;}</style></defs>
			<g transform="translate(-85 -125)">
			  <path class="als loadingicon-svg-0" d="M29.187,9.456a6.539,6.539,0,0,1-6.531,6.531h-5.87l8.6,8.77H28.73l-5.912-6.365a10.2,10.2,0,0,0,5.219-1.171l4.7,4.932a14.161,14.161,0,0,1,1.308,1.588l.638.9,2.757.115-.395-.773a14.131,14.131,0,0,0-2.389-3.356L29.83,15.6A9.443,9.443,0,0,0,22.656,0H0V2.925H22.656a6.539,6.539,0,0,1,6.531,6.531" transform="translate(85 125)"/>
			  <path class="als loadingicon-svg-1" d="M23.55,16.342a1.324,1.324,0,0,1-1.323,1.322H6.019v2.925H22.227a4.247,4.247,0,1,0,0-8.495H0v2.925H22.227a1.325,1.325,0,0,1,1.323,1.323" transform="translate(85 117.96)"/>
			  <path class="als loadingicon-svg-2" d="M26.767,71.175H0V74.1H26.767c5.558,0,10.677-4.324,10.677-8.648H34.425a8.024,8.024,0,0,1-7.658,5.723" transform="translate(85 86.9)"/>
			  <path class="als loadingicon-svg-3" d="M14.45,69.021H35.222A2.925,2.925,0,0,0,38.147,66.1H14.45Z" transform="translate(76.589 86.526)"/>
			  <g transform="translate(45 -838)">
				<path class="als loadingicon-svg-4" d="M22.422,42.959,16.128,49.47c3.025-2.17,9.563-2.17,12.588,0Z" transform="translate(30.612 937.994)"/>
				<path class="als loadingicon-svg-5" d="M28.134,46.65l-7.525-7.525-7.5,7.5.335-1.02,7.163-7.163,7.052,7.052Z" transform="translate(32.368 940.625)"/>
			  </g>
			</g>
			</svg>
			</div>
		`;
		div.innerHTML = htmls;
		bodys.insertBefore(div, bodys.childNodes[0]);
		window.nextLoading = true;
	},
	// 移除 loading
	done: () => {
		nextTick(() => {
			window.nextLoading = false;
			const el = <HTMLElement>document.querySelector('.loading-next');
			el?.parentNode?.removeChild(el);
		});
	},
};
